<template>
	<view class="page-center">
		<!-- <nav-bar title="在找货详情" :showLeftIcon="true" :leftSlot="false"></nav-bar> -->

		<scroll-view class="content-box" scroll-y>
			<view class="layout demandDetails">
				<view class="title">
					<text>需求详情</text>
				</view>
				<view>
					<text>{{fomatterAdressName(detail.startProvince)}} {{fomatterAdressName(detail.startCity)}}</text>
					<image style="height: 8rpx;width: 35rpx;" src="@/static/images/mine/to.png" mode="widthFix">
					</image>
					<text>{{fomatterAdressName(detail.endProvince)}} {{fomatterAdressName(detail.endCity)}}</text>
				</view>
				<text v-if="detail.hasTransitCities == 0">途径点：无</text>
				<text v-else>途径点：{{detail.transitCities}}</text>
				<!-- <view>
					<text>当前联系次数:</text>
					<text>{{detail.callCount || 0}}次</text>
				</view> -->
				<view>
					<text>预计起止时间:</text>
					<text>{{detail.expectedStartTime}}-{{detail.expectedArrivalTime}}</text>
				</view>
				<view>
					<text>运车车型:</text>
					<text>{{forrmatterEnmu(Enmu.carType, detail.vehicleType)}}</text>
				</view>
				<view>
					<text>预计价格区间:</text>
					<text>{{detail.expectedMinPrice}}-{{detail.expectedMaxPrice}}元</text>
				</view>
			</view>
			<view class="detail-main">
				<view class="detail-title">
					<text>联系列表</text>
				</view>
				<view v-if="linkList.length <= 0" class="no-list">
					暂无用户联系您
				</view>
				<view class="quotation-list row-column-top" v-for="item in linkList" :key="item.id">
					<view class="company-name" >
						<view class="name" v-if="userId == item.userId">
							{{item.callerName || ''}} 
						</view>
						<view class="name" v-else>
							****
						</view>
						<view class="time">
							电话咨询时间：{{item.callTime}}
						</view>
						<view class="time">
							联系次数：{{item.callCount}}次
						</view>
					</view>
					<view class="quotation-num" v-if="detail.status != '下架' && detail.userId == userId" style="color: #1777FF" @click="callPhone">
						点击回拨
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 电话联系  报价 -->
		<view class="opeart" v-if="formType == 1 && detail.status != '下架' || formType != 1">
			<view class="opeart-btn opeart-quotation" v-if="formType == 1 && detail.status != '下架'" @click="offterVehicle">
				<image src="../../../static/images/public/white-phone.png" mode=""></image>
				<text>下架</text>
			</view>
			<view class="opeart-btn opeart-quotation" v-if="formType != 1" @click="callPhone">
				<image src="../../../static/images/public/white-phone.png" mode=""></image>
				<text>电话联系</text>
			</view>
			
		</view>

	</view>
</template>

<script>
	import Transport from '@/api/transport.js'
	import {forrmatterEnmu, isTomorrow} from '@/utils/index.js'
	import Enmu from '@/utils/enmu.js'
	import {fomatterAdressName} from '@/utils/common.js'
	import { getToken, checkToken } from '@/utils/auth'
	import UserCenter from '@/api/userCenter.js'
	export default {
		data() {
			return {
				Enmu,
				detail: {},
				itemId: '',
				formType: "",
				linkList: [],
				userId: uni.getStorageSync('userId')
			}
		},
		async onLoad(e) {
			if(e.id) {
				this.itemId = e.id;
				this.getDetail();
			}
			if(e.type) {
				this.formType = e.type;
			}
			this.userName = uni.getStorageSync('userName');
		},
		methods: {
			forrmatterEnmu,
			fomatterAdressName,
			async getDetail() {
				let res = await Transport.getGoodDetail(this.itemId);
				this.detail = res.data;
				this.getLogList();
			},
			async offterVehicle() {
				if (!this.isClickTap) return;
				showConfirm('请再次确认是否下架').then(res => {
					if (res.confirm) {
						UserCenter.myDemandOffset({
								demandType: 1,
								carDemandId: this.detail.id
							}).then(res => {
								uni.navigateBack()
							})
							.finally(() => {
								this.isClickTap = true;
							});
					}
				})
			},
			callPhone(item, callType) {
				if(!checkToken()) return;
				uni.makePhoneCall({
					phoneNumber: this.detail.phoneNumber,
					success: () => {
					  UserCenter.setLogCount({
						callType: 2,
						goodDemandId: this.detail.id,
						phoneNumber: this.userName,
					  }).then(res => {})
					},
					fail: (err) => {
					  console.log('拨打电话失败：', err);
					}
				});
			},
			async getLogList() {
				let res = await Transport.getLogList({
					callType: 2,
					goodDemandId: this.detail.id
				});
				this.linkList = res.rows;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		max-height: 100vh;
		height: 100vh;
		padding: 30rpx;
		padding-top: 0;
		padding-bottom: 130rpx;
		box-sizing: border-box;
		.detail-main {
			background: #fff;
			padding: 20rpx 24rpx;
			border-radius: 12rpx;
			margin-top: 20rpx;
			.no-list {
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #999;
			}
			.detail-title {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 20rpx;
				&::before {
					content: "";
					display: inline-block;
					width: 4rpx;
					height: 24rpx;
					background: #1777FF;
					margin-right: 8rpx;
					vertical-align: middle;
				}
				text {
					vertical-align: middle;
				}
			}
			
			.quotation-list {
				font-size: 28rpx;
				margin-bottom: 30rpx;
				.company-name {
					color: #1a1a1a;
					.time {
						color: #808080;
						margin-top: 16rpx;
					}
				}
				.quotation-num {
					font-weight: 500;
					color: #1777ff;
				}
			}
		}
		.demandDetails {
			>view {
				&:nth-of-type(2) {
					font-family: "PingFang SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
					display: flex;
					align-items: center;

					image {
						margin: 0 12rpx;
					}
				}

				&:nth-of-type(3),
				&:nth-of-type(4),
				&:nth-of-type(5),
				&:nth-of-type(6) {
					display: flex;
					justify-content: space-between;
					margin: 16rpx 0;
					font-size: 28rpx;

					text {
						&:nth-of-type(1) {
							opacity: 0.6;
						}

						&:nth-of-type(2) {
							opacity: 0.9;
						}
					}
				}

				&:nth-of-type(3) {
					margin-top: 20rpx;

					text {
						opacity: 1 !important;
						color: #1777FF;
					}
				}
			}

			>text {
				display: block;
				color: #ff7512;
				font-family: "PingFang SC";
				font-size: 26rpx;
				margin: 16rpx 0;
			}
		}
	}

	.layout {
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
		background: #ffffff;
		border-radius: 12rpx;

		.title {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10rpx;
			margin-bottom: 20rpx;

			>text {
				font-weight: 550;
			}

			>view {
				display: flex;
				align-items: center;

				text {
					opacity: 0.6;
					font-size: 24rpx;
				}
			}

			&::after {
				position: absolute;
				left: 0;
				top: calc(50% - 12rpx);
				content: '';
				display: inline-block;
				width: 4rpx;
				height: 24rpx;
				background: #1777ff;
			}
		}
	}

	.opeart {
		padding: 16rpx 28rpx;
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: #fff;

		.opeart-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 16rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}

		.opeart-phone {
			color: #1777ff;
			border: 2rpx solid #1777ff;
			margin-right: 20rpx;
		}

		.opeart-quotation {
			background: #1777ff;
			color: #fff;
		}
	}
</style>